/* 
0 页面打开的时候默认显示第一页的错题信息
1 点击提交按钮，可以根据用户输入的错题信息向数据库增加错题
2 提交完成以后，会刷新页面，显示最新的错题信息
3 点击具体的页码，可以切换显示的错题页面
4 点击删除按钮，可以删除当前的错题
5 双击错题的内容可以更新错题的信息

*/
var page=1;//记录当前显示的页码
var pagesize=5;//每页显示多少条数据
var pageNum;//记录总共有多少页
// 页面打开的时候，就请求后端的数据
showData();

// 1 点击错题提交按钮
$('#submit').click(function(){
    var title=$('#title').val();
    var detail=$('#detail').val();
    var idea=$('#idea').val();

    // ajax原始步骤
var xhr=new XMLHttpRequest();
xhr.open('get',`./interface/addwq.php?title=${title}&detail=${detail}&idea=${idea}`);
xhr.send();
xhr.onload=function(){
    var result=JSON.parse(xhr.responseText);
    $('.modal').modal('hide');
    if(result.code===1){
        // 错题添加成功
      showData();
    }
    
}
})
// 3 点击具体的页码，可以切换显示的错题页面
$('#page').click(function(e){
    // console.log(e.target);
    var dom=e.target;
    if(dom.nodeName=="A"){
        // 点击的是具体的页面
        page=dom.innerHTML;
        showData();
    }else if(dom.className=="first"){
        // 点击的就是最前面和最后面的按钮
        page=1;
        showData();
    }else{
        page=pageNum;
        showData();
    }
})

// 4 点击删除按钮，可以删除当前的错题
$('tbody').click(function(e){
    var dom=e.target;
    if(dom.nodeName=="BUTTON"){
        // 要知道删除的题目的id
     var id=$(dom).parents('tr').children().eq(0).html();
     var xhr=new XMLHttpRequest();
    xhr.open('get',`./interface/deletewq.php?id=${id}`)
    xhr.send();
    xhr.onload=function(){
        var result=JSON.parse(xhr.responseText);
        if(result.code==1){
          showData();  
        }else{
            alert('删除失败')
        }
    }
    }
})

// 5 双击错题的内容可以更新错题的信息
$('tbody').dblclick(function(e){
    var dom=e.target;
    if(dom.className=="content"){
        var value=$(dom).html();
        $(dom).html(`<input type=text value="${value}"/>`);
    }
})
$('tbody').change(function(e){
    var input=e.target;
    var newValue=input.value;
    var id=$(input).parents('tr').children().eq(0).html();
    var key=$(input).parent().attr('key');
//   更新数据库错题信息
    var xhr=new XMLHttpRequest();
    xhr.open('get',`./interface/update.php?id=${id}&key=${key}&value=${newValue}`)
    xhr.send();
    xhr.onload=function(){
        showData();
    }
    
    
    // $(input).parent().html(newValue);
})


// 2 提交完成以后，会刷新页面，显示最新的错题信息
// 0 页面打开的时候默认显示第一页的错题信息
// showData函数可以显示指定的page页的pagesize个数据，同时更新分页器
function showData(){
    var xhr=new XMLHttpRequest();
xhr.open('get',`./interface/showlist.php?page=${page}&count=${pagesize}`);
xhr.send();
xhr.onload=function(){
    var result=JSON.parse(xhr.responseText);
    var arr=result.data;//是一个数组
    var total=result.total;//数据表里面的错题的总数，用于分页
    // 显示指定页码的错题信息
    var str="";
    $.each(arr,function(index,obj){
        str+=`<tr>
        <th scope="row">${obj.wq_id}</th>
        <td class="content" key="wq_title">${obj.wq_title}</td>
        <td class="content" key="wq_detail">${obj.wq_detail}</td>
        <td class="content" key="wq_idea">${obj.wq_idea}</td>
        <td>
            <button class="btn btn-danger btn-sm del">删除</button>
        </td>
      </tr>`
    })
$('tbody').html(str);
    

// 更新分页器
 pageNum=Math.ceil(total/pagesize);//总共多少页
var pageHtml=`<ul class="pagination justify-content-center">
<li class="page-item">
  <a class="page-link" href="#" aria-label="Previous">
    <span aria-hidden="true" class="first">&laquo;</span>
  </a>
</li>`;
for(var i=1;i<=pageNum;i++){
    pageHtml+=`<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
}
 pageHtml+=`<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true" class="last">&raquo;</span>
</a>
</li>
</ul>`;
$('#page').html(pageHtml);

}
}
